<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="../jquery/jquery-3.2.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/bootstrap.css">

</head>
<body>

<div class="container">

    <pre>
        <h1>
            注意事项:
            不能在输入框的单独一侧添加多个额外元素
            不能在单个输入框组中添加多个表单控件
        </h1>
    </pre>
    <h3>
        基本输入框组
    </h3>
    <div class="input-group">
        <input type="text" class="form-control" placeholder="用户名">
        <span class="input-group-addon">@qq.com</span>
    </div>
    <br />
    <br />
    <div class="input-group">
        <span class="input-group-addon">$</span>
        <input type="text" class="form-control">
        <span class="input-group-addon">.00</span>
    </div>

    <h3>
        输入框大小样式
    </h3>
    <div class="input-group input-group-lg">
        <input type="text" class="form-control" placeholder="用户名">
        <span class="input-group-addon">@qq.com</span>
    </div>
    <br />
    <br />
    <div class="input-group input-group-sm">
        <span class="input-group-addon">$</span>
        <input type="text" class="form-control">
        <span class="input-group-addon">.00</span>
    </div>

    <h3>
        将多选按钮或者单选按钮作为额外元素
    </h3>
    <div class="input-group">
        <span class="input-group-addon"><input type="radio">男</span>
        <input type="text" class="form-control"placeholder="用户名">
    </div>
    <br />
    <br />
    <div class="input-group">
        <span class="input-group-addon"><input type="checkbox">哈哈</span>
        <input type="text" class="form-control" placeholder="用户名">
    </div>

    <h3>
        淘宝网页搜索实例
    </h3>
    <div class="input-group input-group-lg">
        <input type="text" class="form-control" placeholder="用户名">
        <span class="input-group-btn">
            <button class="btn btn-primary">
              <span class="glyphicon glyphicon-search">搜索</span>
            </button>
        </span>
    </div>

    <h3>
        淘宝搜索组合框实例
    </h3>
    <div class="input-group">
        <div class="input-group-btn">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                请选择<span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#">宝贝</a></li>
                <li><a href="#">店铺</a></li>
            </ul>
        </div>
        <input type="text" class="form-control" placeholder="输入关键字">
        <span class="input-group-btn">
            <button class="btn btn-primary">
                搜索
            </button>
        </span>
    </div>

    <h3>
        淘宝索索组合框实例  --加入分列式下拉菜单按钮
    </h3>
    <div class="input-group">
        <div class="input-group-btn">
            <button type="button" class="btn btn-default ">
                请选择
            </button>
            <button type="button" class="btn btn-default dropdown-toggle"  data-toggle="dropdown">
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#">宝贝</a></li>
                <li><a href="#">店铺</a></li>
            </ul>
        </div>
        <input type="text" class="form-control" placeholder="请输入关键字">
        <span class="input-group-btn">
            <button class="btn btn-primary">
                <span class="glyphicon glyphicon-search">搜索</span>
            </button>
        </span>
    </div>
</div>
</body>
</html>